{% extends 'base.html' %}

{% block title %}个人资料{% endblock %}

{% load static %}
{% block content %}
    <style>
        /* 复用 login.html 和 search_results.html 的样式 */
        :root {
            --primary-blue: #3F51B5;
            --text-gray: #6D6D6D;
            --accent-yellow: #FFF8E5;
            --accent-purple: #E8E6F9;
        }

        body {
            background: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            background: linear-gradient(to bottom,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .profile-container {
            background: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
        }

        .profile-container h2 {
            color: var(--primary-blue);
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .profile-container p {
            margin-bottom: 1rem;
            color: var(--text-gray);
        }

        .nlp-btn {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 16px;
            white-space: nowrap;
            cursor: pointer;
            transition: opacity 0.3s;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 10px;
        }

        .nlp-btn:hover {
            opacity: 0.9;
            color: white;
        }

        .profile-container button {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 0.5rem;
            padding: 0.8rem 1.5rem;
            font-size: 16px;
            width: 100%;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .profile-container button:hover {
            opacity: 0.9;
        }
    </style>

    <div class="profile-container">
        <h2>欢迎, {{ user.username }}</h2>
        <p>邮箱: {{ user.email }}</p>
        <p>用户 ID: {{ user.id }}</p>
        <p>中文水平: HSK{{ chinese_level }}</p>
        <p>学科代码: {{ subject_code }}</p>
        <p>学科名称: {{ subject_name }}</p>
        <a href="{% url 'logout' %}" class="btn btn-danger">退出登录</a>

        <h3 class="text-center mt-4">我的收藏</h3>
        <ul style="list-style-type: none; padding-left: 0;">
            {% for collection in collections %}
                {% if collection.term %}
                    <li>
                        <a href="{% url 'term_detail' term_id=collection.term.id %}" class="nlp-btn">{{ collection.term.term_name }}</a>
                    </li>
                {% elif collection.word %}
                    <li>
                        <a href="{% url 'word_detail' word_id=collection.word.id %}" class="nlp-btn">{{ collection.word.word }}</a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
{% endblock %}
